<template>
  <div class="homePage">
    <el-row type="flex" justify="start" align="middle">
      <el-col :span="5"><el-avatar shape="square" :src="head_url" class="header-url"></el-avatar></el-col>
      <el-col :span="9">
        <div class="header-text">
        <h2>{{name}}</h2>
        <p>欢迎</p>
        </div>
      </el-col>
      <el-col :span="6" class="suggest">
        <p>性别：<span>{{sexarry[sex]}}</span></p>
        <p>手机号码：<span>{{phone}}</span></p>
        <p>邮箱：<span>{{account}}</span></p>
      </el-col>
    </el-row>
    <el-divider></el-divider>
    <el-row type="flex" justify="center" class="clearfix1" align="middle">
      <el-col :span="4"><img src="../../assets/img/personal/homePage/portal-icon-1.png"></el-col>
      <el-col :span="6"><h2>全部订单：{{nopasstotal+passtotal}}</h2></el-col>
      <el-col :span="4"><img src="../../assets/img/personal/homePage/portal-icon-2.png"></el-col>
      <el-col :span="6"><h2>待审核订单：{{nopasstotal}}</h2></el-col>
    </el-row>
    <el-row type="flex" justify="center" class="clearfix2" align="middle">
      <el-col :span="4"><img src="../../assets/img/personal/homePage/portal-icon-3.png"></el-col>
      <el-col :span="6"><h2>通过订单：{{passtotal}}</h2></el-col>
    </el-row>
  </div>
</template>
<script>
import http from '@/utils/HttpUtil'
export default {
  data () {
    return {
      action: {
        selectUser: 'shoes_Web_exploded/User/selectUserById',
        selectPass: 'shoes_Web_exploded/Order/selectPagePassOrder',
        selectNoPass: 'shoes_Web_exploded/Order/selectPagePassOrder'
      },
      name: '',
      sexarry: ['保密', '男', '女'],
      userId: '',
      passtotal: 0,
      nopasstotal: 0,
      sex: 0,
      account: '',
      phone: '',
      head_url: ''
    }
  },
  components: {

  },
  computed: {

  },
  methods: {
    getUserId () {
      this.userId = sessionStorage.getItem('user_id')
    },
    getUserInfo () {
      http.xhrPost(this, this.action.selectUser + '/' + this.userId, null, (res) => {
        this.name = res.data.name
        this.sex = res.data.sex
        this.phone = res.data.phone
        this.account = res.data.account
        this.head_url = res.data.head_url
        console.log(res)
      })
    },
    getPassInfo (curr_page = 1, page_size = 10) {
      const params = {
        'curr_page': curr_page,
        'page_size': page_size
      }
      http.xhrPost(this, this.action.selectPass + '/' + this.userId, params, (res) => {
        this.passtotal = res.data.total
      })
    },
    getNoPassInfo (curr_page = 1, page_size = 10) {
      const params = {
        'curr_page': curr_page,
        'page_size': page_size
      }
      http.xhrPost(this, this.action.selectNoPass + '/' + this.userId, params, (res) => {
        this.nopasstotal = res.data.total
      })
    }
  },
  mounted () {
    this.getUserId()
    this.getUserInfo()
    this.getPassInfo()
    this.getNoPassInfo()
  }
}
</script>

<style lang="scss">
  @import '../../assets/style/common.scss';
  .homePage {
    .header-url {
      height: 150px;
      width: 150px;
    }
    .header-text {
      height: 150px;
      line-height: 45px;
      vertical-align: middle;
      h2 {
        font-size: 24px;
        font-weight: 400;
        color: #616161;
      }
      p {
        color: #b0b0b0;
        font-size: 14px;
      }
    }
    .suggest {
      line-height: 50px;
      p {
        color: #757575;
        font-size: 14px;
        span {
          font-size: 14px;
          color: #ffac13;
        }
      }
    }
    .clearfix1 {
      height: 180px;
      h2{
        font-size: 18px;
        font-weight: 400;
        color: #757575;
      }
    }
    .clearfix2 {
      height: 180px;
      h2{
        font-size: 18px;
        font-weight: 400;
        color: #757575;
      }
    }
  }
</style>
